
<script>

import { useUserStore } from '@/store/user.js'

export default {
    name: "UpdatePassword",
    data() {
        return {
            active: 1,
            form: {
                id: '',
                userName: '',
                userPassword: '',

                firstPassword: '',
                secondPassword: '',
            },
            user: useUserStore().currentUser,
        }
    },
    methods: {
        zeroToFirst() {
            if (this.form.userName === '' || this.form.userPassword === '') {
                this.$message.warning("请输入账号密码为空，请输入！")
                return false;
            }
            if (this.user.userName !== this.form.userName && this.user.userPassword !== this.form.userPassword) {
                this.$message.warning("账号密码错误")
                return false;
            }
            this.active++
        },
        firstToSeconde() {
            if (this.form.firstPassword !== this.form.secondPassword) {
                this.$message.warning("两次输入的密码不一致，修改失败")
                return false;
            } else {
                this.user.userPassword = this.form.secondPassword;
                useUserStore().setCurrentUser(this.user);
                this.$http({
                    url: '/user/update',
                    method: 'post',
                    data: this.user
                }).then(res => res.data)
                    .then(res => {
                        console.log("修改密码", res)
                        if (res.code === 0) {
                            this.$message.success("修改成功")
                        }
                    })
                this.active++
                this.$router.push('/login');
            }
        },
    }
}
</script>

<template>
    <div id="update-password">
        <el-steps :active="active" align-center finish-status="success">
            <el-step title="验证身份" />
            <el-step title="设置密码" />
            <el-step title="改密成功" />
        </el-steps>

        <div class>
            <template v-if="active === 1">
                <el-form class="form-item" :model="form">
                    <el-form-item>
                        <el-input placeholder="请输入账号" v-model="form.userName" />
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入原始密码" v-model="form.userPassword" show-password />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" style="width: 100%;height: 50px;" @click="zeroToFirst">下一步</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template v-else-if="active === 2">
                <el-form class="form-item" :model="form">
                    <el-form-item>
                        <el-input placeholder="请输入新密码" show-password v-model="form.firstPassword" />
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="第二次密码" v-model="form.secondPassword" show-password />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" style="width: 100%;height: 50px;" @click="firstToSeconde">下一步</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template v-else-if="active === 3">
                <el-result icon="success" title="修改密码成功">

                </el-result>
            </template>

        </div>

    </div>
</template>

<style scoped>
.form-item {
    width: 400px;
    margin: 50px auto;
}
</style>